<template>


  <Back title="门诊消费记录">
    <!-- 头部按钮配置 -->
    <template #buttons>
      <el-button type="primary" size="small" plain>导入</el-button>
      <el-button type="primary" size="small" plain>导出</el-button>
    </template>
    <template #head>
      <div class="top">
        <div class="block">
          <el-date-picker v-model="value1" type="daterange" range-separator="~" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <el-col :span="12" class="firstselect">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link" style="color: #000">
              请选择科室<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-arrow-right">
                <el-col :span="12">
                  <el-dropdown>
                    <span class="el-dropdown-link"> 内科 </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>消化内科</el-dropdown-item>
                      <el-dropdown-item>血液内科</el-dropdown-item>
                      <el-dropdown-item>风湿免疫内科</el-dropdown-item>
                      <el-dropdown-item>肾内科</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-dropdown-item>
              <el-dropdown-item icon="el-icon-arrow-right">
                <el-col :span="12">
                  <el-dropdown>
                    <span class="el-dropdown-link"> 外科 </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>骨科</el-dropdown-item>
                      <el-dropdown-item>皮肤科</el-dropdown-item>
                      <el-dropdown-item>手足科</el-dropdown-item>
                      <el-dropdown-item>身体科</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <div>
          <input type="text" placeholder="请输入医生/病人姓名" class="search" />
          <button class="searchbtn">搜索</button>
        </div>
      </div>
    </template>
    <template #table_body>
      <!-- 表格主体数据渲染部分 -->
      <div class="msgbody">
        <el-table ref="multipleTable" :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="操作时间" prop="caozuotimes" align="center">
          </el-table-column>
          <el-table-column style="font-size: 12px" label="订单号" prop="jiuzhengcard" align="center"></el-table-column>
          <el-table-column label="患者姓名" width="80" show-overflow-tooltip prop="hurtname" align="center">
          </el-table-column>
          <el-table-column label="就诊卡号" width="100" show-overflow-tooltip prop="jiuzhengcard" align="center">
          </el-table-column>
          <el-table-column label="来源" show-overflow-tooltip align="center" prop="source"></el-table-column>
          <el-table-column label="业务类型" width="80" show-overflow-tooltip prop="type" align="center"></el-table-column>
          <el-table-column label="费用类型" width="90" align="center" show-overflow-tooltip prop="moneytype">
          </el-table-column>
          <el-table-column label="支付方式" width="70" show-overflow-tooltip prop="payways" align="center">
          </el-table-column>
          <el-table-column label="支付金额" width="100" align="center" show-overflow-tooltip prop="paymoney">
          </el-table-column>
          <el-table-column label="缴费状态" width="80" show-overflow-tooltip prop="paystate" align="center">
          </el-table-column>
          <el-table-column label="操作" width="80" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <i @click="godetail(scope.row)" class="el-icon-s-order" style="font-size: '32px'"></i>
            </template>

          </el-table-column>
        </el-table>

      </div>
    </template>
    <template #page>
      <!-- 分页符 -->
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[1, 5, 10, 15]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </div>
    </template>


  </Back>
</template>
<script>
import Vue from "vue";
import { Button } from "element-ui";
import { payHistory } from '../../api/payMoney/index'
import Back from '@/components/Part/BackColor.vue'
Vue.use(Button);
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      tableData: [],
      currentPage: 1, // 当前页码
      total: 100, // 总条数
      pageSize: 10, // 每页的数据条数
    };
  },
  mounted() {

    payHistory().then(res => {
      this.tableData = res.data
    })
  },
  methods: {
    handleSelectionChange(index) {
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    godetail(val) {
      this.$router.push("/cost/detail?proid=" + val.proid);
    },
  },
  components: {
    Back,
  }
}
</script>
<style scoped>
.u4088_home {
  display: flex;
  align-items: center;
  margin: 10px 0 20px;
  width: 1316px;
}

.u4088 {
  background-color: rgba(0, 110, 255, 1);
  border-radius: 4px;
  width: 24px;
  height: 8px;
}

.home_text {
  width: 144px;
  font-size: 24px;
  margin-left: 20px;
}

.top {
  display: flex;
  align-items: center;
}

.searchbtn {
  width: 64px;
  height: 32px;
  background-color: rgba(0, 110, 255, 1);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  margin-left: 16px;
}

.search {
  width: 320px;
  height: 40px;
  border: 1px solid #ccc;
  text-indent: 1rem;
  box-sizing: border-box;
  border-radius: 4px;
  padding-left: 10px;
}

.firstselect {
  width: 160px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
  margin-right: 10px;
}

.el-dropdown-menu__item {
  width: 100px;
}

.cion {
  width: 24px;
  border-radius: 4px;
  height: 8px;
  background-color: rgba(0, 110, 255, 1);
}

.guahao {
  font-size: 24px;
}

.typebox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 320px;
  padding-right: 20px;
}

.typebox input {
  width: 18px;
  height: 18px;
}

.typebox span {
  font-size: 14px;
}

.block {
  padding-right: 20px;
}

.el-button {
  background-color: rgba(0, 110, 255, 0.0980392156862);
  color: #006eff;
  border: none;
}

header {
  display: flex;
}

#main {
  width: 1280px;
  min-height: 780px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 0px 20px rgb(215 215 215);
  padding: 20px;
}

.btn_sub {
  flex: 1;
  text-align: end;
}

.el-pagination {
  text-align: right;
}
</style>

<style>
[sty="sty"] .el-table th.el-table__cell>.cell {
  color: #999;
  font-size: 12px;
  font-weight: lighter;
}

[sty="sty"] [class^="el-icon-"] {
  font-size: 24px;
  color: #006eff;
}
</style>